<template>
    <div class="home">
        <div class="top">
      <div class="back" @click="onClickLeft('/')">
        <img src="../assets/img/back.png" alt=""  />
      </div>
      <div class="title">
    {{$t('m.系统公告')}}
      </div>
    </div>  
      <div class="content"> 
        <div class="card" >
      <div class="titles">{{$t('m.公告标题')}}</div>
      <div class="time">2025-07--16</div>
      <div class="box">
        {{$t('m.公告内容')}}
      </div> 
      <div class="end">{{$t('m.运营者')}}</div>      
     </div>  
     
  
    </div>
    
</div>
</template>
<script>
export default {
  name: "News",
  data() {
    return {
        current:0,
        loading:false,
        dcshow:true,
        list:[],
        lists:[],
        lqNum:0,
        lqType:0,
        lqshow:false,
        lqloading:false,
        countNum:0,
        nodePool:0,
        rankPool:0,
        isNode:false,
        userWallet:"",
        userInfo:""
    }
  },
  filters: {
    yingcang(val) {
      if (val) {
        let a = val.replace(/(\w{8})\w+(\w{8})/, "$1...$2");
        return a;
      } else {
        return "";
      }
    },
  },
  created(){
  },
  methods:{
    onClickLeft(val) {
       this.$router.replace({ path:val})
    },
  }
}

</script>
<style lang="scss" scoped>
@import "../../src/assets/scss/_handle.scss";

$t-mf: "PingFang";
$t-f: "DINAlternate-Bold";

.home {
    position: relative;
  background:  #161628 url("../assets/img/dsbg.jpg")  fixed no-repeat;
    // background: #0F112A;
   background-size: cover;
     background-position: top center;
  overflow-x: hidden;
width: 750px;
margin: 0 auto;
min-height: 100vh;
  .top { background: #012f2bbf;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    height: 96px;
    margin: 0 auto;
    color: #fff;
       border-bottom: 1px solid #1cc10e;
      .back {
      position: absolute;
    left: 20px;
        width: 50px;
    height: 50px;
    // background: linear-gradient(45deg,#ffffff, #ffffff);
    // border-radius: 50% ;
    display: flex;
    align-items: center;
    justify-content: center;
      img {
        height: 50px;
        width: 50px;
      }
      .icosn {
        height: 36px;
        margin-right: 5px;
        width: 36px;
      }
    }
    .title{
        background: linear-gradient(234deg,#ffffff, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      font-size: 36px;
      font-weight: 600;
      font-family: $t-f;
    }
  }
    .content{
        margin-top: 28px;
        .title{
      font-size: 38px;
      font-weight: bold;
      color: #ffffff;
      margin: 72px auto;
      border-radius: 36px 0 36px 0;
      width: 360px;
      padding: 22px;
      position: relative;
    }
    .title::after{
      content: "";
      position: absolute;
      height: 4px;
      width: 100px;
      border-radius: 16px;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(200deg, #12c2fc 0%, #1cc10e 31%, #14a5d0 49%, #441dda 79%, #0b1042 100%);
    }
    
        .card {
      // width: 694px;
      // background:#ffffff url("../assets/img/bgs.png") no-repeat ;
      background: #00000070;
         background-size: cover;
    background-position: left top;
          align-items: center;
          border: 1px solid #34C717;
      border-radius: 20px;
      padding: 30px 40px;
      margin: 20px 30px 20px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .titles{
        font-size: 28px;
          font-weight: 600;
          color: #ffffff;
          width: 100%;
          border-bottom: 1px solid rgb(53, 53, 53);
          text-align: left;
          position: relative;
          padding-left: 42px;
          margin-bottom: 10px;
          box-sizing: border-box;
          padding-bottom: 10px;
      }
      .titles::after{
        position: absolute;
      height: 32px;
      width: 32px;
      top: calc(50% - 5px);
      left: 0px;
      content: "";
      transform: translateY(-50%);
      background: #34C717;
      background: url("../assets/img/logo.png") no-repeat ;
      background-size: 100% 100%;
      }
      .time{
        font-size: 22px;
        color: #1cc10e;
        text-align: left;
        padding-bottom: 10px;
        // padding-left: 20px;
        width: 100%;
      }
      
      .box{
        width: 100%;
        // padding-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #ffffff;
        text-align: left;
        font-size: 26px;
        margin-bottom: 10px;
      }
      .end{
        text-align: right;
        width: 100%;
        font-size: 22px;
        color: #aab3b4;
      }
    }
}
      
}

  </style>
